<template>
  <div>
    <div class="allTop">
      <div
        v-for="(item, index) in industrial"
        :key="index"
        @click="handClick(item.id, index)"
        :class="{ active: true, ordinary: active == index }"
        style="margin-right:20px;cursor: pointer;"
      >
        {{ item.goodName }}
      </div>
    </div>
    <div class="nav">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="分类">
          <el-cascader
            style="width: 100%"
            :options="seleList"
            :props="{
              checkStrictly: true,
              value: 'id',
              label: 'goodName',
              children: 'children',
              expandTrigger: 'hover'
            }"
            clearable
            ref="cascaderAddr"
            @change="newSelet"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="queryParams.goodsName"
            placeholder="请输入检索信息"
            clearable
            size="small"
            style="margin-left:20px"
          />
        </el-form-item>
        <el-button
          style="margin-left:30px;background:#089867;color:white"
          @click="checkList"
          :loading="btnload"
          >查询</el-button
        >
      </el-form>
      <div class="nav_right">
        <el-row>
          <el-button @click="xznzClick" class="nzAdd" style="color:#089867"
            >新增农资</el-button
          >
          <el-button
            @click="nzmlClick"
            class="nzTab"
            style="background:#089867;color:white"
            >{{ btn_right }}</el-button
          >
          <!-- <el-button
            @click="kcClick"
            class="nzTab"
            style="background:#089867;color:white"
            v-show="secretKey == 1"
            >{{ btn_right }}</el-button
          > -->
        </el-row>
        <!-- <div @click="xznzClick(0)" class="nzAdd">新增农资</div>
        <div @click="nzmlClick(1)" class="nzTab">农资目录</div> -->
      </div>
    </div>
    <div class="fromList" v-if="secretKey != 1">
      <el-table
        :data="nzCloum"
        style="width: 100%;border:1px solid #e0e0e0"
        :header-cell-style="tableHeaderColor"
        :row-class-name="tableRowClassName"
        v-loading="tabload"
      >
        <el-table-column
          header-align="center"
          align="center"
          label="序号"
          :show-overflow-tooltip="true"
          width="0.2rem"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="goodsName"
          label="农资名称"
          :show-overflow-tooltip="true"
          width="0.2rem"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="goodsTypeName"
          label="分类"
          :show-overflow-tooltip="true"
          width="0.2rem"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="model"
          label="型号"
          :show-overflow-tooltip="true"
          width="0.2rem"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="brand"
          label="品牌"
          :show-overflow-tooltip="true"
          width="0.2rem"
        />
        <el-table-column
          header-align="center"
          align="center"
          label="规格"
          :show-overflow-tooltip="true"
          width="0.2rem"
        >
          <template slot-scope="scope">
            {{ scope.row.specs }}{{ scope.row.meteringUnit
            }}{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="unit"
          label="计数单位"
          :show-overflow-tooltip="true"
          width="0.2rem"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="period"
          label="保质期"
          :show-overflow-tooltip="true"
          width="0.2rem"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="supplier"
          label="生产商"
          :show-overflow-tooltip="true"
          width="0.2rem"
        />
        <el-table-column
          header-align="center"
          align="center"
          label="单价"
          :show-overflow-tooltip="true"
          width="0.2rem"
        >
          <template slot-scope="scope">
            {{ scope.row.price / 100 }}元
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="存量"
          :show-overflow-tooltip="true"
          width="0.2rem"
        >
          <template slot-scope="scope">
            {{ scope.row.qty }}{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleCheck(scope.row)"
              style="color:#3260f1"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleInt(scope.row)"
              style="color:#05b787"
              >入库</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleOut(scope.row)"
              style="color:#ff7000"
              >出库</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div
        style="display: flex;justify-content: center;padding: 20px 20px 0 20px"
      >
        <page-plugin
          v-show="true"
          :pages="page.pages"
          :total="page.total"
          label="农资库存"
          :page.sync="page.pageNo"
          :limit.sync="page.pageSize"
          @changePageNum="changePageNum"
        />
      </div>
    </div>
    <div class="fromList" v-else>
      <el-table
        :data="kcCloum"
        style="width: 100%;border:1px solid #e0e0e0"
        :header-cell-style="tableHeaderColor"
        :row-class-name="tableRowClassName"
        v-loading="tabload"
      >
        <el-table-column
          header-align="center"
          align="center"
          prop="id"
          label="序号"
          :show-overflow-tooltip="true"
          width="0.36rem"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="goodsName"
          label="农资名称"
          :show-overflow-tooltip="true"
          width="0.36rem"
        />

        <el-table-column
          header-align="center"
          align="center"
          prop="goodsTypeName"
          label="分类"
          :show-overflow-tooltip="true"
          width="0.36rem"
        />

        <el-table-column
          header-align="center"
          align="center"
          prop="model"
          label="型号"
          :show-overflow-tooltip="true"
          width="0.36rem"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="brand"
          label="品牌"
          :show-overflow-tooltip="true"
          width="0.36rem"
        />

        <el-table-column
          header-align="center"
          align="center"
          label="规格"
          :show-overflow-tooltip="true"
          width="0.36rem"
        >
          <template slot-scope="scope">
            {{ scope.row.specs }}{{ scope.row.meteringUnit }}/{{
              scope.row.unit
            }}
          </template>
        </el-table-column>

        <el-table-column
          header-align="center"
          align="center"
          prop="unit"
          label="计数单位"
          :show-overflow-tooltip="true"
          width="0.36rem"
        />

        <el-table-column
          header-align="center"
          align="center"
          label="保质期"
          :show-overflow-tooltip="true"
          width="0.36rem"
        >
          <template slot-scope="scope">
            {{ scope.row.period }}{{ scope.row.periodUnit }}
          </template>
        </el-table-column>

        <el-table-column
          header-align="center"
          align="center"
          prop="supplier"
          label="生产商"
          :show-overflow-tooltip="true"
          width="0.36rem"
        />

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleModify(scope.row)"
              style="color:#3260f1"
              >修改</el-button
            >
            <el-popconfirm
              title="是否确认删除当前数据？"
              @confirm="handleDele(scope.row)"
              confirmButtonText="是"
              cancelButtonText="否"
            >
              <el-button
                slot="reference"
                size="mini"
                type="text"
                style="color:red"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div
        style="display: flex;justify-content: center;padding: 20px 20px 0 20px"
      >
        <page-plugin
          v-show="true"
          :pages="page_0.pages"
          :total="page_0.total"
          label="农资目录"
          :page.sync="page_0.pageNo"
          :limit.sync="page_0.pageSize"
          @changePageNum="changePageNum_0"
        />
      </div>
    </div>
    <!--查看---->
    <examine ref="examineDialog"></examine>
    <!--入库-->
    <warehousDialog ref="warehousDialog"></warehousDialog>
    <!--出库-->
    <deliveryDialog ref="deliveryDialog"></deliveryDialog>
    <!--新增农资-->
    <addproducDialog ref="addproducDialog"></addproducDialog>
    <!--修改-->
    <reviseDialog ref="reviseDialog" @keyValue="keyValue"> </reviseDialog>
  </div>
</template>

<script>
import {
  querynzList,
  querynzmlList,
  querynzCheck,
  querynzChecklist,
  querynzWarehousing,
  handleOut,
  deletnzList,
  querynzOutnum
} from "@/api/manage";
import examine from "@/components/examine/examine";
import deliveryDialog from "@/components/deliveryDialog/deliveryDialog";
import warehousDialog from "@/components/warehousDialog/warehousDialog";
import addproducDialog from "@/components/addproducDialog/addproducDialog";
import reviseDialog from "@/components/reviseDialog/reviseDialog";
import pagePlugin from "@/components/page-plugin";
import { typelistMaterial } from "@/api/material";
export default {
  props: ["idx"],
  created() {
    this.$dynamic(window, document, 84, height => {
      this.mainWrapperHeight = height;
      this.mapWrapperHeight = this.mainWrapperHeight * 0.58;
      this.warnWrapperHeight = this.mapWrapperHeight * 0.48;
      this.chartWrapperHeight =
        this.mainWrapperHeight - this.mapWrapperHeight - 18;
      this.landWrapperHeight =
        this.mapWrapperHeight - this.warnWrapperHeight - 18;
      this.$nextTick(() => {
        try {
          this.setNongZi(this.NZDataList);
          this.setXunTian(this.XTDataList[0]);
        } catch (e) {}
      });
    });
    this.tabload = true;
    typelistMaterial({ goodType: "farm_good" }).then(res => {
      this.industrial = res.data.data;
      const rootObj = [
        {
          id: 1,
          path: 0,
          parentId: 0,
          goodType: "farm_good",
          goodName: "农资",
          children: res.data.data
        }
      ];
      this.seleList = rootObj;
      // console.log(this.from.seleList)
      this.addNews = true;
    });
    this.getTableList();
  },
  mounted() {
    console.log(this.idx);
  },
  beforeDestroy() {
    this.$unResize(window);
  },

  components: {
    examine,
    "page-plugin": pagePlugin,
    warehousDialog,
    deliveryDialog,
    addproducDialog,
    reviseDialog
  },
  data() {
    return {
      btnload: false,
      tabload: false,
      //每次刷新批次单号
      pcNumber: "",
      //农资查看详情
      nzMain: {},
      //农资详情表格
      nzLetter: [],
      seleList: [],
      //查看dialog
      show: false,
      show_0: false,
      show_1: false,
      show_2: false,
      show_3: false,
      secretKey: 0,
      currentPage: 1,
      size: 5,
      btn_right: "农资目录",
      page: {
        pages: 1,
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      page_0: {
        pages: 1,
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      nzList: [
        {
          label: "序号",
          prop: "id"
        },
        {
          label: "农资名称",
          prop: "nzName"
        },
        {
          label: "分类",
          prop: "firstLevel"
        },
        {
          label: "型号",
          prop: "model"
        },
        {
          label: "品牌",
          prop: "marker"
        },
        {
          label: "规格",
          prop: "brand"
        },
        {
          label: "计数单位",
          prop: "norms"
        },
        {
          label: "保质期",
          prop: "unit"
        },
        {
          label: "生产商",
          prop: "quality"
        },
        {
          label: "单价",
          prop: "unitPrice"
        },
        {
          label: "存量",
          prop: "stock"
        }
      ],
      kcList: [
        {
          label: "序号",
          prop: "id"
        },
        {
          label: "农资名称",
          prop: "nzName"
        },
        {
          label: "分类",
          prop: "type"
        },
        {
          label: "型号",
          prop: "model"
        },
        {
          label: "品牌",
          prop: "brand"
        },
        {
          label: "规格",
          prop: "norms"
        },
        {
          label: "计数单位",
          prop: "unit"
        },
        {
          label: "保质期",
          prop: "quality"
        },
        {
          label: "生产商",
          prop: "producer"
        }
      ],
      kcCloum: [],
      nzCloum: [],
      //列表查询
      queryParams: {
        // secondLevel: null,
        // thirdLevel: null,
        // info: null,
        goodsName: null
      },
      options: null,
      options0: "",
      //判断高亮
      active: "",
      //   idx: 0,
      industrial: []
    };
  },

  methods: {
    keyValue(keyValue) {
      console.log(keyValue);
      if (keyValue == 0) {
        setTimeout(() => {
          querynzmlList({ isWarn: 0 }).then(res => {
            this.kcCloum = res.data.rows;
            console.log(this.kcCloum);
          });
        }, 100);
      }
    },
    //查询按钮
    checkList() {
      this.btnload = true;
      this.tabload = true;
      this.queryParams.isWarn = 0;
      // querynzList(this.queryParams).then(res => {
      //   this.btnload = false;
      //   this.tabload = false;
      //   this.nzCloum = res.data.rows;
      // });
      // this.querynzList()
      if (this.secretKey != 1) {
        this.getTableList();
      } else {
        this.getnzmlTableList();
      }
    },
    /**农资分页查询列表*/
    getTableList() {
      const a = {
        pageSize: this.page.pageSize,
        pageNum: this.page.pageNum,
        isWarn: 0,
        goodsName: this.queryParams.goodsName,
        goodsType: this.queryParams.goodsType
      };
      this.tabload = true;
      this.btnload = true;
      querynzList(a).then(res => {
        // console.log(res);
        if (res.data.code == 200) {
          this.tabload = false;
          this.btnload = false;
          this.nzCloum = res.data.rows;
          this.page.total = res.data.total;
          // this.page.pageSize = res.data.pageSize;
          // this.page.pageNum = res.data.pageNum;
          // this.page.pages = res.data.pages;
          this.$message({ type: "success", message: res.data.msg });
        } else {
          this.tabload = false;
          this.btnload = false;
          this.$message({ type: "error", message: res.data.msg });
        }
      });
    },

    /**农资目录分页查询列表*/
    getnzmlTableList() {
      const b = {
        pageSize: this.page_0.pageSize,
        pageNum: this.page_0.pageNum,
        isWarn: 0,
        goodsName: this.queryParams.goodsName
        // goodsType: this.queryParams.goodsType
      };
      querynzmlList(b).then(res => {
        if (res.data.code == 200) {
          this.tabload = false;
          this.btnload = false;
          this.kcCloum = res.data.rows;
          this.page_0.total = res.data.total;
          this.$message({ type: "success", message: res.data.msg });
        } else {
          this.tabload = false;
          this.btnload = false;
          this.$message({ type: "error", message: res.data.msg });
        }
      });
    },
    /**查看 */
    handleCheck(row) {
      // this.show = true;
      // querynzCheck(row)

      querynzCheck(row.id).then(res => {
        // console.log(res.data.data);
        this.nzMain = res.data.data;
        this.tabload = false;
        this.$refs.examineDialog.show(true, this.nzMain, this.tabload);
      });
      querynzChecklist(row.id).then(respone => {
        this.nzLetter = respone.data.rows;
        // console.log(respone);
        this.$refs.examineDialog.letter(this.nzLetter);
      });
    },
    /**入库*/
    handleInt(row) {
      console.log(row);
      querynzWarehousing().then(res => {
        this.$refs.warehousDialog.show(
          true,
          this.pcNumber,
          row.id,
          row.goodsId,
          row.price,
          row
        );
        this.pcNumber = res.data.msg;
      });
    },
    /**出库*/
    handleOut(row) {
      console.log(row);
      this.$refs.deliveryDialog.show(true, row);
    },
    /**删除*/
    handleDele(row) {
      // console.log(row.id)
      this.tabload = true;
      this.btnload = true;
      deletnzList(row.id).then(res => {
        if (res.data.code == 200) {
          this.$message({ type: "success", message: res.data.msg });
        } else {
          this.$message({ type: "error", message: res.data.msg });
        }
        this.tabload = false;
        this.btnload = false;
        console.log(res);
              const b = {
        pageSize: this.page_0.pageSize,
        pageNum: this.page_0.pageNum,
        isWarn: 0,
        goodsName: this.queryParams.goodsName
        // goodsType: this.queryParams.goodsType
      };
      querynzmlList(b).then(res => {
        if (res.data.code == 200) {
          this.tabload = false;
          this.btnload = false;
          this.kcCloum = res.data.rows;
          this.page_0.total = res.data.total;
          // this.$message({ type: "success", message: res.data.msg });
        } else {
          this.tabload = false;
          this.btnload = false;
          // this.$message({ type: "error", message: res.data.msg });
        }
      });
      });
    },
    handClick(label, index) {
      this.tabload = true;
      this.queryParams.goodsType = label;
      this.getTableList();
      // querynzList({ isWarn: 0, goodsType: label }).then(res => {
      //   console.log(res);
      //   this.nzCloum = res.data.rows;
      //   this.tabload = false;
      // });
      this.active = index;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.size = val;
      // console.log(val);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      // console.log(val);
    },
    changePageNum_0(val) {
      console.log("修改页码时触发", val);
      this.page_0.pageNum = val.page;
      this.getnzmlTableList();
    },
    changePageNum(val) {
      console.log("修改页码时触发", val);
      this.page.pageNum = val.page;
      this.getTableList();
    },
    //表头样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color: #f3f3f5;color: #000;font-weight: 500;";
    },
    //斑马线
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    xznzClick(row) {
      this.$refs.addproducDialog.show(true, row);
    },
    handleModify(row) {
      this.$refs.reviseDialog.show(true, row);
    },
    //农资目录切换表格
    nzmlClick() {
      if (this.secretKey == 0) {
        this.secretKey = 1;
        this.btn_right = "库存管理";
        this.tabload = true;
        this.getnzmlTableList();
        this.queryParams.goodsType = "";
        this.pageNum = 1;
      } else {
        this.tabload = true;
        this.getTableList();
        this.secretKey = 0;
        this.btn_right = "农资目录";
      }
    },
    newSelet(val) {
      setTimeout(() => {
        let a = this.$refs["cascaderAddr"];
        console.log(a);
      }, 1);
      let c = val[val.length - 1];
      this.queryParams.goodsType = c;
      console.log(c);
    }
    // kcClick() {
    //   this.secretKey = 0;
    //   if (this.secretKey == 0) {
    //     this.btn_right = "农资目录";
    //   } else {
    //     this.btn_right = "库存管理";
    //   }
    // }
  }
};
</script>

<style scoped>
.allTop {
  display: flex;
  background: white;
  padding: 10px;
}
.active {
  width: 100px;
  height: 35px;
  box-sizing: border-box;
  background: white;
  color: orange;
  border: 1px solid orange;
  font-size: 16px;
  line-height: 35px;
  text-align: center;
}
.ordinary {
  width: 100px;
  height: 35px;
  box-sizing: border-box;
  background: orange;
  color: white;
  font-size: 16px;
  line-height: 35px;
  text-align: center;
}
.nav {
  width: 100%;

  /* height: 60px; */
  /* border: 1px solid black; */
  margin-top: 20px;
  display: flex;
  background: white;
  justify-content: space-between;
  padding: 10px;
}
.nav_right {
  width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-right: 20px;  */
}
.fromList {
  margin-top: 20px;
  width: 100%;
  /* height: 785px; */
  overflow-y: auto;
  /* background: chartreuse; */
  background: white;
  padding: 10px;
}
.nzAdd {
  /* width: 80px;
  line-height: 30px; */
  text-align: center;
  color: green;
  border: 1px solid green;
  box-sizing: border-box;
  cursor: pointer;
}
.nzTab {
  /* width: 80px;
  line-height: 30px; */
  text-align: center;
  color: white;
  background: green;
  box-sizing: border-box;
  cursor: pointer;
}
.nav >>> .el-button--primary {
  background: green;
  border: 1px solid green;
  box-sizing: border-box;
}
</style>
<style>
.nav .el-form-item {
  margin: 0 !important;
}
.el-table .warning-row {
  background: #f1faf7;
}

.el-table .success-row {
  background: white;
}
</style>
